<{include file="public/header.html"}>
<script type="text/javascript" src="<{$smarty.const.STATIC_COMPONENT_URL}>js/common.js"></script>
<script type="text/javascript" src="<{$smarty.const.STATIC_COMPONENT_URL}>js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBP5W4f9GW08Ag5kpEX-TAin0_4B8YWe-g&sensor=false"></script>
<script type="text/javascript">
	var map;
	var infowindow;
	var marker;
	var title = '';
	var address = '';
	var geocoder = new google.maps.Geocoder();
		function initialize() {
			var geocoder = new google.maps.Geocoder();
			var myOptions = {
				zoom: 8,
				mapTypeId: google.maps.MapTypeId.ROADMAP
		   };
		   //assign map to div
		   map = new google.maps.Map(document.getElementById("map_canvas"),
		       myOptions);
		 	// Try HTML5 geolocation
			if(navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(function(position) {
		        var pos = new google.maps.LatLng(position.coords.latitude,
		                                         position.coords.longitude);
		
		        map.setCenter(pos);
		      },function() {
		    	  handleNoGeolocation(true);
		      });
		    }else {
		    	// Browser doesn't support Geolocation
		    	handleNoGeolocation(false);
		    }
		 	//add marker when map loaded
		 	//setMarkers(map);
			//allow the user to click the map to create a marker
			/*google.maps.event.addListener(map, 'click', function(event) {
			    placeMarker(event.latLng);
			});*/
			placeMarker();

		}//end init
		
		function setMarkers(map){
			<{while $garage->fetch()}>
				var myLatLng = new google.maps.LatLng(<{$garage->latitude}>, <{$garage->longitude}>);
				marker = new google.maps.Marker({
					position: myLatLng,
				    map: map
				});
				openMarker(marker, '<{$garage->title}>');
			<{/while}>
		}
		
		function openMarker(marker, title){
			var window = new google.maps.InfoWindow(
				{ content: title,
				  size: new google.maps.Size(50,50)
			});
			google.maps.event.addListener(marker, 'click', function() {
			  window.open(map, marker);
			});
		}
		
		function placeMarker(location) {
			var marker = new google.maps.Marker({
			    position: location,
			    map: map
			});
			//get address
			geocoder.geocode({'latLng': location}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
			    if (results[1]) {
					address = results[1].formatted_address;
			    }
				} else {
				  alert("Geocoder failed due to: " + status);
				}
			});
			//init infowindow
			infowindow = new google.maps.InfoWindow({ 
				position: location,
				size: new google.maps.Size(50,50)
			});
			var content = '<form action="">';
				content += '<fieldset style="width:150px; border:1px solid #ccc; padding:20px">';
				content += '<legend>New Garage</legend>';
				content += '<label for="title">Title</label>';
				content += '<input type="text" id="title" style="width:100%;"/>';
				content += '<label for="category">Category</label>';
				content += '<select id="category" name="category" style="width:100%;"/>';
				content += '<option>--- choose ---</option>';
				content += '<{$str_cat_option}>;'
				content += '</select>';
				content += '<label for="price">Price (m2)</label>';
				content += '<input type="text" id="m2" style="width:100%;"/>';
				content += '<label for="price">Price (meter)</label>';
				content += '<input type="text" id="meter" style="width:100%;"/>';
				content += '<label for="price">Price (spot)</label>';
				content += '<input type="text" id="spot" style="width:100%;"/>';
				content += '<input type="hidden" id="longitude" value="'+ location.lng() +'"/>';
				content += '<input type="hidden" id="latitude" value="'+ location.lat() +'" />';
				content += '<input type="hidden" id="address" value="'+ address +'" />';
				content += '<br/><br/>';
				content += '<input type="button" value="Save" onclick="storeMarker()" >';
				content += '</fieldset></form>';
			map.setCenter(location);
			//open form
			infowindow.setContent(content);
			infowindow.open(map);
		}
		
		function storeMarker(){
			var lng = document.getElementById('address').value;
			var lat = document.getElementById('latitude').value;
			var title = document.getElementById('title').value;
			var category_id = document.getElementById('category').value;
			var m2 = document.getElementById('m2').value;
			var meter = document.getElementById('meter').value;
			var spot = document.getElementById('spot').value;
			var address = document.getElementById('address').value;
			
			if(isNaN(m2)){
				alert('Price/m2 must be a number');
				return false;
			}
			
			if(isNaN(meter)){
				alert('Price/meter must be a number');
				return false;
			}
			
			if(isNaN(spot)){
				alert('Price/spot must be a number');
				return false;
			}
			
			var param = 'lng='+ lng +'&lat='+lat+'&title='+title+'&category_id='+category_id+'&m2='+m2+'&meter='+meter+'&spot='+spot+'&address='+address;
			
			$.ajax({
				type : 'post',
				data : param,
				url : '<{$smarty.const.APPLICATION_URL}>/user/addgarage',
				success : function(data){
					infowindow.close();
				}
			});
			return false;
		}

		function handleNoGeolocation(errorFlag) {
		  if (errorFlag) {
		    var content = 'Error: The Geolocation service failed.';
		  } else {
		    var content = 'Error: Your browser doesn\'t support geolocation.';
		  }
		
		  var options = {
		    map: map,
		    position: new google.maps.LatLng(60, 105),
		    content: content
		  };
		
		  var infowindow = new google.maps.InfoWindow(options);
		  map.setCenter(options.position);
		}
	      
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="container">
    	<div class="signup">
            <div class="signup-title"><span>Add Garage</span></div>
            <div class="step2">
            	<div id="map_canvas" style="width:810px; height:700px"></div>
            </div><br/><br/>
            <div class="row" align="right">
                <a href="<{$smarty.const.APPLICATION_URL}>/user/package"><img src="<{$smarty.const.STATIC_COMPONENT_URL}>images/btnContinue.jpg" class="btnContinue" /></a>
                <a href="<{$smarty.const.APPLICATION_URL}>"><img src="<{$smarty.const.STATIC_COMPONENT_URL}>images/btnCancel.jpg" /></a>
            </div>
        </div>
    </div><!--end container-->
    <div class="clear"></div>
<{include file="public/footer.html"}>